<template>
  <!-- 创意素材  -->
  <div>
    <div>
      <div>
        <!-- <a-button type="primary" @click="nextItem">
          检测
        </a-button> -->
        <a-button type="primary" @click="addCreativeGroup">
          添加创意组
        </a-button>
        <span style="margin-left:10px;">创意组个数：{{ creativeListNumber }} / {{ creativeListTotal }}</span>
      </div>

      <!-- 创意组 -->
      <div class="material-content" v-for="(group,$groupIdx) in creativeGroups" :key="$groupIdx" >
        <div>
          <a-radio-group
            v-model="group.creativeMaterialMode"
            @change="creativeGroupMode($groupIdx,$event)"
          >
            <a-radio-button value="no"> 自定义  </a-radio-button>
            <a-radio-button value="STATIC_ASSEMBLE"> 程序化 </a-radio-button>
          </a-radio-group>
        </div>
        <div class="material">
          <div class="material-title">
            <div>
              <a-input style="width:150px;margin-right:10px;" v-model="group.creative_group_name" >
                {{ group.creative_group_name }}
              </a-input>
              <span v-if="group.creativeMaterialMode === 'no'" >
                创意个数：{{ group.creativeNumber }}/{{ group.creativeTotal }}
              </span>
              <span v-else-if="group.creativeMaterialMode === 'STATIC_ASSEMBLE'">
                视频个数{{ group.videoCreativeNumber }}/{{ group.videoCreativeTotal }}
                图片个数{{ group.imageCreativeNumber }}/{{ group.imageCreativeTotal }}
              </span>
            </div>
            <div class="icon-close">
              <a-icon v-if="creativeGroups.length > 1" type="close-circle" @click="closeCreativeGroup($groupIdx)"/>
              <a-icon type="copy" @click="copyCreativeGroup(group)" />
            </div>
          </div>

          <!-- 广告素材设置 -->
            <!-- :cardErr="cardErr[$groupIdx]" -->
          <material-item
            ref="materialItem"
            v-model="group.creatives"
            :staticTitleList.sync="group.staticTitleList"
            :creativeNumber.sync="group.creativeNumber"
            :imageCreativeNumber.sync="group.imageCreativeNumber"
            :imageCreativeTotal.sync="group.imageCreativeTotal"
            :videoCreativeNumber.sync="group.videoCreativeNumber"
            :videoCreativeTotal.sync="group.videoCreativeTotal"
            :creativeMaterialMode="group.creativeMaterialMode"
            :creativeTotal.sync="group.creativeTotal"
          ></material-item>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
import  materialItem  from "./materialItem";

const creativerListItem = {
  creative_group_name:'创意组1',
  creativeMaterialMode:'no',  // 创意方式 
  videoCreativeNumber:0, // 程序化时，视频、图片分开计算
  videoCreativeTotal:10, // 10 程序化时，视频总个数
  imageCreativeNumber:0,
  imageCreativeTotal:12, // 12
  creativeNumber:0,
  creativeTotal:10, //  创意总数
  staticTitleList:[], // 程序化的标题集合
  creatives:[
    { image_mode:'CREATIVE_IMAGE_MODE_SMALL',type:'image',vh:'horizontal',name:'小图',img:'http://www.adsdesk.cn/icon/CREATIVE_IMAGE_MODE_SMALL.png',
      materials:[]
    },
    { image_mode:'CREATIVE_IMAGE_MODE_LARGE',type:'image',vh:'horizontal',name:'大图横图',img:'http://www.adsdesk.cn/icon/CREATIVE_IMAGE_MODE_LARGE.png', 
      materials:[]
    },
    { image_mode:'CREATIVE_IMAGE_MODE_VIDEO',type:'video',vh:'horizontal',name:'横版视频',img:'http://www.adsdesk.cn/icon/CREATIVE_IMAGE_MODE_VIDEO.png', 
      materials:[]
    },
    { image_mode:'CREATIVE_IMAGE_MODE_LARGE_VERTICAL',type:'image',vh:'vertical',name:'大图竖图',img:'http://www.adsdesk.cn/icon/CREATIVE_IMAGE_MODE_LARGE_VERTICAL.png', 
      materials:[]
    },
    { image_mode:'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL',type:'video',vh:'vertical',name:'竖版视频',img:'http://www.adsdesk.cn/icon/CREATIVE_IMAGE_MODE_VIDEO_VERTICAL.png', 
      materials:[]
    }
  ],  //创意素材
}
export default {
  components:{ materialItem },
  data(){
    return {
      creativeGroups:[
        this.$deepCopy(creativerListItem)
      ],
      // finallyCreativeGroups:null,  // 最终创意数据
      creativeListTotal:10, // 创意组总数
    }
  },
  computed:{
    // 创意组个数
    creativeListNumber(){
      return this.creativeGroups.length
    }
  },
  created(){
    if( Object.keys(this.$route.query).length !== 0 ){
      this.creativeGroups = JSON.parse(this.$route.query.data).creativeGroups
    }
  },
  methods:{
    // 新增创意组
    addCreativeGroup(){
      if( this.creativeListNumber === this.creativeListTotal ) return this.$message.error(`创意组上限！！！`);
      // 新建创意
      let creative_group = this.$deepCopy(creativerListItem)
      creative_group.creative_group_name = `创意组${(this.creativeListNumber+1)}`
      this.creativeGroups.push(creative_group)
    },
    // 创意组方式
    creativeGroupMode(index,e){
      this.creativeGroups[index].creativeMaterialMode = e.target.value
    },
    // 删除创意组
    closeCreativeGroup(index){
      this.creativeGroups.splice(index,1)
    },
    // 复制创意组
    copyCreativeGroup(copy){
      if( this.creativeListNumber === this.creativeListTotal ) return this.$message.error(`创意组上限！！！`);
      let obj = this.$deepCopy(copy)
      obj.creative_group_name = `${obj.creative_group_name}-${this.$randomStr()}`
      this.creativeGroups.push(obj)
    },
    // 父组件检测
    async nextItem(){
      // 检测创意组内未填写内容（标题、创意、封面）
      this.$refs['materialItem'].forEach( refs => {
        refs.findCreativErr()
      });

      let finallyCreativeGroups = []   // 最后要上传的创意组数据结构
      let creativeGroups_copy = this.$deepCopy(this.creativeGroups)

      creativeGroups_copy.forEach( (creativeGroup,index) => {
        let creativeList = []
        creativeGroup.creatives.forEach(creative => {
          creative.materials.forEach(material => {
            creativeList.push(material)
          });
        });
        creativeGroup.creativeList = creativeList
      });

      for (const creativeGroup of creativeGroups_copy) {
        let is_creative = {}
        if( creativeGroup.creativeList.length === 0 ) return alert('创意组内请选择创意素材'),false

        is_creative.creative_group_name = creativeGroup.creative_group_name  // 创意组名称
        is_creative.creativeMaterialMode = creativeGroup.creativeMaterialMode  // 创意组方式
        
        for (const creative of creativeGroup.creativeList) {
          if( Object.keys(creative.materialItem).length === 0  ) return alert('缺少素材'),false
          if( creative.materialItem.material_type === 'video' && !creative.coverImage ) return alert('请选择视频封面'),false
          if(creativeGroup.creativeMaterialMode === 'no'){
            if( creative.titleList.length === 0 ) return alert('请正确选择标题'),false
            is_creative.titles = creative.titleList[0]
          }else if(creativeGroup.creativeMaterialMode === 'STATIC_ASSEMBLE'){
            if( creativeGroup.staticTitleList.length === 0 ) return alert('请正确选择标题'),false
            is_creative.titles = creativeGroup.staticTitleList
          }
        }
        is_creative.creativeList = creativeGroup.creativeList
        finallyCreativeGroups.push(is_creative)
      }

      localStorage.setItem('CreativeGroups',JSON.stringify(finallyCreativeGroups) )
      this.$store.commit('SET_CREATIVE_GROUPS',finallyCreativeGroups)
      this.$store.commit('SET_CREATIVE_GROUPS_VIEW',this.creativeGroups)
      return true
    },
  }
}
</script>

<style lang="less" scoped>
  .ant-list-item{
    padding: 2px 5px;
  }
  .material-content{
    padding: 10px;
    .material{
      width: 100%;
      border: 1px solid #C2C2C3;
      .material-title{
        width: 100%;
        height: 50px;
        padding: 0 20px;
        background-color: #F8F8F9;
        border: 1px solid #C2C2C3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon-close{
          .anticon {
            margin-left: 10px;
          }
          cursor: pointer;
        }
      }
    }
  }

</style>